<template>
  <footer class="app-footer">
    <div class="footer-content">
      <!-- 左侧：学校标志和名称 -->
      <div class="logo-section">
        <img src="../../assets/images/vue.svg" style="width: 230px; height: 80px" alt="图片丢失"/>
      </div>

      <div class="logo-section">
        <img src="../../assets/images/team.png" style="width: 120px; height: auto" />
      </div>

      <!-- 中间：联系信息和技术支持 -->
      <div class="info-section">
        <p>技术支持：贵州省高等学校智能计算与预警监测创新团队</p>
<!--       <p style="margin-left: 70px">贵州省高等学校电力装备制造质量智能化评价与预警创新团队</p>-->
        <p>版权所有：贵州财经大学</p>
        <p>联系电话：13595041920</p>
        <p>地址：贵州省花溪大学城贵州财经大学 邮编：550025</p>
      </div>



    </div>
  </footer>
</template>

<script setup>
// 这里可以添加逻辑（如果需要），比如动态生成链接或国际化支持
</script>

<style scoped>
.app-footer {
  background-color: #cbd8e8; /* 深绿色背景 */
  color: #090909;
  padding: 20px 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.logo-section {
  display: flex;
  align-items: center;
}

.logo-section img {
  width: 150px;
  height: auto;
  margin-right: 10px;
}

.logo-section span {
  font-size: 16px;
  font-weight: bold;
}

.info-section {
  text-align: left;
  font-size: 14px;
}

.qr-code-section {
  display: flex;
  gap: 20px;
}

.qr-code {
  text-align: center;
}

.qr-code img {
  width: 100px;
  height: 100px;
}

.qr-code span {
  display: block;
  margin-top: 5px;
}
</style>